Callback Hell and Pyramid of Doom in JavaScript
Callback Hell happens when you have too many nested callbacks, making your code:
Hard to read
Hard to debug
Hard to maintain
It's also called the Pyramid of Doom because the code starts to indent like a pyramid .
Example: Callback Hell
Imagine you’re doing 3 things in order:
Order a pizza
Make a drink
Watch a movie
Each task takes time (simulated by setTimeout), and we use callbacks to make sure they happen in order.
Example:-
setTimeout(() => {
console.log(" Ordered pizza");
setTimeout(() => {
console.log(" Made a drink");
setTimeout(() => {
console.log(" Started the movie");
}, 1000); // watch movie
}, 1000); // make drink
}, 1000); // order pizza
Output:-
Ordered pizza
Made a drink
Started the movie
The output is correct — but look at the code! It's deeply nested and becomes messy fast!
Why You Should Avoid Callback Hell
How to Fix Both?
Use named functions
Use Promises
Use async/await
function watchMovie() {
setTimeout(() => {
console.log(" Started the movie");
}, 1000);
}
function makeDrink() {
setTimeout(() => {
console.log(" Made a drink");
watchMovie();
}, 1000);
}
function orderPizza() {
setTimeout(() => {
console.log(" Ordered pizza");
makeDrink();
}, 1000);
}
orderPizza();